<template>
  <!-- ........................基本语法使用........................... -->
  <div class="h3">
    <h3>基本语法使用</h3>
    <div>
      {{count}}
    </div>
    <div class="button">
      <a-button type="primary" @click="addFn">count++</a-button>
      <a-button type="primary" danger @click="reduceFn">count--</a-button>
    </div>
  </div>

  <!-- .........................组件传值.......................... -->
  <div class="h3">
    <h3>组件传值</h3>
    <Children :visible.sync="visible" @update:visible="visible = $event" @closeFn="closeFn"></Children>
    <a-button type="primary" @click="showModal">对话框</a-button>
  </div>

  <!-- .........................pinia使用.......................... -->
  <childrenStore></childrenStore>

  <Table></Table>
  <Computed></Computed>
  <a-button type="primary" @click="navTo">跳转路由</a-button>

</template>

<script setup lang='ts'>
import { ref } from "@vue/reactivity";
import Children from "./component/children.vue";
import childrenStore from "./component/store.vue";
import Table from './component/table.vue'
import Computed from './component/computed.vue'
import { Router, useRouter} from 'vue-router'
 
const count = ref<number>(1);
const visible = ref<boolean>(false);
const route:Router = useRouter()

// count加
const addFn = () => {
  count.value++;
};
// count减
const reduceFn = () => {
  count.value--;
};
// 打开弹窗
const showModal = () => {
  visible.value = true;
};
// 关闭弹窗
const closeFn = (_e: MouseEvent) => {
  visible.value = false;
};

// 跳转路由
const navTo = () => {
  route.push('/log')
}
</script>

<style lang='less' scoped>
.button {
  margin-top: 20px;
}
.h3 {
  margin-top: 100px;
  margin-bottom: 20px;
  &:first-child {
    margin-top: 0;
  }
  h3{
    margin-bottom:20px

  }
}
</style>